<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.  读取文件 -->
    <p id="errMessage"></p>
    <input id="file" type="file" />
    <button onclick="upload()">上传</button>

    <h2>状态</h2>
    <p id="upStatus"></p>
    <h2>进度条<span id="progressValue"></span></h2>
    <progress id="progressBar" max="1" value="0"></progress>

    <script>
      const fileInput = document.getElementById("file");

      function valid(file) {
        // 1. 没有选择报错
        if (file === undefined) {
          errMessage.innerHTML = "前选择文件";
          return false;
        }

        // 2. 限制允许上传类型
        const allowType = ["mp4", "png"];
        // 获取选中文件的类型（后缀）
        // console.log(file.name.match(/\.(?<ext>\w+$)/).groups.ext);
        // console.log(file.name.split(".").pop());
        const ext = file.name.split(".").slice(-1)[0];
        if (allowType.includes(ext) === false) {
          errMessage.innerHTML = `文件类型允许${allowType.join(",")}`;
          return false;
        }
        // 3. 限制文件大小
        const allowSize = 1;
        //字节
        if (file.size > 1 * 1024 * 1024) {
          errMessage.innerHTML = `文件大小不能超过${allowSize}M`;
          return false;
        }
        // 清空错误信息
        errMessage.innerHTML = "";
      }

      //上传验证
      fileInput.onchange = function () {
        //获取当前文件
        const file = this.files[0];
        valid(file);
      };

      function upload() {
        // 2. js中获取文件对象
        const file = fileInput.files[0];
        // if (valid(file) === false) {
        //   return;
        // }
        //----
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:3000/data");
        xhr.responseType = "json";
        const fd = new FormData(); //new Map()
        fd.append("username", "lili");
        fd.append("age", "20");
        fd.append("gender", "girl");
        // 3. 编码（封装）要上传的文件
        fd.append("dataFile", file);

        // 1.1 客户端->服务端（上传）
        xhr.upload.onloadstart = function () {
          upStatus.innerHTML = "上传开始";
        };
        // 1.2 客户端->服务端（上传）
        xhr.upload.onprogress = function (e) {
          upStatus.innerHTML = "上传中...";
          // 进度值
          progressValue.innerHTML = (e.loaded / e.total) * 100 + "%";
          // 进度条
          progressBar.value = e.loaded / e.total;
        };
        // 1.3 客户端->服务端（上传）
        xhr.upload.onload = function () {
          upStatus.innerHTML = "上传成功";
        };
        // 1.3 客户端->服务端（上传）
        xhr.upload.onloadend = function () {
          upStatus.innerHTML = "上传结束";
        };

        // 获取响应
        xhr.onload = function () {
          if (xhr.status === 500) {
            console.log("服务器错误");
            return;
          }
          console.log(xhr.response);
        };
        // 发送请求
        xhr.send(fd);
      }
    </script>
  </body>
</html>
